<template>
  <div id="line"></div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'LineChart',
    data() {
      return {
        charts: '',
        liveNum: [150, 230, 224, 218, 135, 147, 260]
      }
    },
    methods: {
      drawLine(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          title: {
            text: '本周用户活跃量',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.liveNum,
              type: 'line'
            }
          ]
        })
      }
    },
    mounted() {
      this.drawLine('line')
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      let that = this  // 需要拿出 this 不然调用不到 charts
      window.addEventListener('resize', () => { that.charts.resize() });
    }
  }
</script>

<style scoped>
  #line {
    width: 600px;
    height: 450px;
    background-color: #fff;
    padding: 30px 50px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #ddd;
    margin-right: 15px;
  }
</style>